@import '../styles/common/baseColors.less';
@import './HYButtonVariant.less';

// primary颜色
@color-primary: #2d81ff;
@primary-hover: #5398ff;
@primary-active: #1e88e5;
@primary-loading: #96c0ff;
@primary-selected: #e1f5fe;
@primary-shadow: none;

@color-button: #f8f8f8;
// 普通字体颜色
@text-color: fade(@black, 65%);

@button-hover: #2d81ff;
@button-border-hover: #d9d9d9;
@button-bg-hover: #eff5ff;

@button-active: #2874e5;
@button-shadow: none;

// 按钮颜色
// Default Button Normal
@btn-default-color: @text-color;
@btn-default-bg: @white;
@btn-default-border: #cdd6e1;
// Default Button Hover
@btn-default-color-hover: @color-primary;
@btn-default-bg-hover: @white;
@btn-default-border-hover: @color-primary;
// Default Button Active
@btn-default-color-active: @color-primary;
@btn-default-bg-active: @white;
@btn-default-border-active: @color-primary;

// default dashed 反白按钮
@btn-default-rev-color: fade(@white, 97%);
@btn-default-rev-bg: fade(@white, 0%);
@btn-default-rev-border: fade(@white, 97%);
@btn-default-rev-color-hover: @color-primary;
@btn-default-rev-bg-hover: fade(@white, 0%);
@btn-default-rev-border-hover: @color-primary;
@btn-default-rev-color-active: @color-primary;
@btn-default-rev-bg-active: fade(@white, 0%);
@btn-default-rev-border-active: @color-primary;

// Button Normal
@btn-button-color: @color;
@btn-button-bg: @color-button;
@btn-button-border: @button-border-hover;
// Button Hover
@btn-button-color-hover: @button-hover;
@btn-button-bg-hover: @button-bg-hover;
@btn-button-border-hover: @button-hover;
// Button Active
@btn-button-color-active: @button-active;
@btn-button-bg-active: @button-bg-hover;
@btn-button-border-active: @button-active;
// Button Disabled
@btn-button-color-disabled: #bbb;
@btn-button-bg-disabled: #f8f8f8;
@btn-button-border-disabled: #d9d9d9;

// Primary Button Normal
@btn-primary-color: @white;
@btn-primary-bg: @color-primary;
@btn-primary-border: @color-primary;
// Primary Button Hover
@btn-primary-color-hover: @white;
@btn-primary-bg-hover: @primary-hover;
@btn-primary-border-hover: @primary-hover;
// Primary Button Active
@btn-primary-color-active: @white;
@btn-primary-bg-active: @button-active;
@btn-primary-border-active: @button-active;
// Primary Button Disabled
@btn-primary-color-disabled: @white;
@btn-primary-bg-disabled: #96c0ff;
@btn-primary-border-disabled: #96c0ff;

:global {
  .hy-btn {
    &.ant-btn {
      height: 32px;
      font-size: 12px;
      .button-variant(
        @btn-button-color; @btn-button-bg; @btn-button-border;
          @btn-button-color-hover; @btn-button-bg-hover;
          @btn-button-border-hover; @btn-button-color-active;
          @btn-button-bg-active; @btn-button-border-active;
          @btn-button-color-disabled; @btn-button-bg-disabled;
          @btn-button-border-disabled; @button-shadow;
      );
      &.hy-btn-white {
        .button-variant(
          @btn-button-color; @white; @btn-button-border;
            @btn-button-color-hover; @btn-button-bg-hover;
            @btn-button-border-hover; @btn-button-color-active;
            @btn-button-bg-active; @btn-button-border-active;
            @btn-button-color-disabled; @white; @btn-button-border-disabled;
            @button-shadow;
        );
      }

      &.ant-btn-primary {
        .button-variant(
          @btn-primary-color; @btn-primary-bg; @btn-primary-border;
            @btn-primary-color-hover; @btn-primary-bg-hover;
            @btn-primary-border-hover; @btn-primary-color-active;
            @btn-primary-bg-active; @btn-primary-border-active;
            @btn-primary-color-disabled; @btn-primary-bg-disabled;
            @btn-primary-border-disabled; @primary-shadow;
        );
      }
    }
  }
}
